<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Man&Uuml; - Registro</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link title="default" rel="stylesheet" href="Estilos/css/bootstrap.css" type="text/css" />
        <script src="Estilos/js/jquery.js"></script>
        <script src="Estilos/js/bootstrap.js"></script>
        <script src="Estilos/js/jquery.validate.min.js"></script>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script>
            $().ready(function() {
                $("#registerForm").validate({
                    rules: {
                            nombre: {
                                    required:true,
                                    minlength: 2
                            },
                            apellidos:{
                                    required:true,
                                    minlength: 2
                            },
                            correo: {
                                    required: true,
                                    email: true
                            },
                            password: {
                                    required: true,
                                    minlength: 5
                            },
                            password2: {
                                    required: true,
                                    minlength: 5,
                                    equalTo: "#password"
                            },
                            codigo: {
                                    required: true,
                                    minlength: 6
                            }
                    },
                    messages: {
                            nombre: {
                                    required: "Por favor ingresa tu nombre",
                                    minlength: "Tu nombre es demasiado corto, almenos 2 caracteres"
                            },
                            apellidos: {
                                    required: "Por favor ingresa tus apellidos",
                                    minlength: "Tu apellido es demasiado corto, almenos 2 caracteres"
                            },
                            correo:{
                                    required: "Por favor ingresa tu correo elect&oacute;nico",
                                    email: "Por favor ingresa un email v&aacute;lido"
                            },
                            password: {
                                    required: "Por favor ingresa una contrase&ntilde;a",
                                    minlength: "Contrase&ntilde;a demasiado corta"
                            },
                            password2: {
                                    required: "Repite la contrase&ntilde;a",
                                    minlength: "Contrase&ntilde;a demasiado corta",
                                    equalTo: "Las contrase&ntilde;as no coinciden"
                            },
                            codigo: {
                                    required: "Por favor ingresa el c&oacute;digo",
                                    minlength: "El c&oacute;digo es demasiado corto"
                            }
                    }
                });
            });
        </script>
        <style>
            body{
                background: url('img/bg.png') 0px -100px repeat-x;
                margin: 20px 0 0 0;
            }
            label.error {
                color: red;
            }
        </style>
    </head>
    <body>
        <div class="container-fluid">
            <div class="row-fluid" style="background:url('img/manuPet.png') no-repeat 400px -200px; height: 800px;" >
                <div class="span6">
                <!-- -->    
                    <div class="hero-unit">
                        <h1>Man&uuml;</h1>
                        <p class="lead">Registrate</p>
                        <br/>
                        <form action="ServletRegister" method="POST" class="form-horizontal" id="registerForm">
                            <%=(request.getParameter("error")!=null?("<div class='alert alert-error'>"+request.getParameter("error")+"</div>"):"")%>
                            <fieldset>
                                <div class="control-group">
                                    <label class="control-label" for="nombre">Nombre</label>
                                    <div class="controls">
                                        <input name="nombre" placeholder="Escribe tu nombre" id="nombre" class="input-xlarge" type="text" data-provide="typeahead" value="<%=(request.getParameter("nombre")!=null?(""+request.getParameter("nombre")+""):"")%>"/
                                               <>
                                    </div>
                                </div>
                                <div class="control-group">
                                    <label class="control-label" for="apellidos">Apellidos</label>
                                    <div class="controls">
                                        <input name="apellidos" id="apellidos" type="text" data-provide="typeahead" class="input-xlarge" value="<%=(request.getParameter("apellido")!=null?(""+request.getParameter("apellido")+""):"")%>" placeholder="Escribe tus apellidos"/>
                                    </div>
                                </div>
                                <div class="control-group">
                                    <label for="correo" class="control-label">Correo Elect&oacute;nico</label>
                                    <div class="controls">
                                        <input class="input-xlarge" name="correo" id="correo" placeholder="Escribe tu correo electr&oacute;nico" type="text" data-provide="typeahead" value="<%=(request.getParameter("correo")!=null?(""+request.getParameter("correo")+""):"")%>" />
                                    </div>
                                </div>
                                <div class="control-group">
                                    <label for="password" class="control-label">Contrase&ntilde;a</label>
                                    <div class="controls">
                                        <input class="input-xlarge" placeholder="Escribe tu clave" name="password" id="password" type="password" data-provide="typeahead"/>
                                    </div>
                                </div>
                                <div class="control-group">
                                    <label for="password2" class="control-label">Repite tu contrase&ntilde;a</label>
                                    <div class="controls">
                                        <input class="input-xlarge" placeholder="Repite tu clave" name="password2" id="password2" type="password" data-provide="typeahead"/> 
                                    </div>
                                </div>
                                <div class="control-group">
                                    <label for="codigo" class="control-label">C&oacute;digo de activaci&oacute;n</label>
                                    <div class="controls">
                                        <input class="input-xlarge" placeholder="Escribe el c&oacute;digo de activaci&oacute;n" id="codigo" name="codigo" type="text" data-provide="typeahead"/>
                                    </div>
                                </div>
                                <div class="form-actions">
                                    <input class="btn btn-warning " type="submit" value="Continuar">
                                </div>
                            </fieldset>
                        </form>
                    </div>
                <!-- -->    
                </div>
                <div class="span6" >&nbsp;</div>
            </div>
        </div>
    </body>
</html>
